<template>
  <van-sticky>
    <van-search
      v-model="searchValue"
      shape="round"
      placeholder="搜索活动名称"
      input-align="center"
      @search="onSearch"
    >
      <template #left>
        <svg class="icon mr4 ft32" aria-hidden="true" @click="$goPage(-1)">
          <use xlink:href="#icon-back"></use>
        </svg>
      </template>
    </van-search>
  </van-sticky>
  <div class="list">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <card-list :list="list" @onClick="clickCell"></card-list>
    </van-list>
  </div>
</template>

<script setup>
import cardList from '@/components/cardList.vue'
import { ref, getCurrentInstance, onBeforeMount } from 'vue'
import { weekDay } from '@/utils/model'
const list = ref([])
const page = ref(1)
const limit = 5
const loading = ref(false) //是否加载状态
const finished = ref(false) //是否已加载完成
const searchValue = ref('') //搜索关键字
const instance = getCurrentInstance()
const _this = instance.appContext.config.globalProperties

const onLoad = () => {
  // 异步更新数据
  _this.$api.activity
    .getActivityList({
      page: page.value,
      limit,
      name: searchValue.value,
      type: 1
    })
    .then((res) => {
      res.data = res.data.map((item) => {
        item.startDate = _this.$utils.parseTime(
          item.start_time,
          '{y}-{m}-{d} {h}:{i}'
        )
        return item
      })
      list.value = list.value.concat(res.data)
      page.value++
      // 加载状态结束
      loading.value = false

      // 数据全部加载完成
      if (list.value.length >= res.meta.total) {
        finished.value = true
      }
    })
}
//点击搜索事件
const onSearch = (val) => {
  initEvent()
}
const initEvent = () => {
  // 初始化列表加载状态
  page.value = 1
  list.value = []
  finished.value = false
  loading.value = true
  onLoad()
}
//点击活动列表跳转页面事件
const clickCell = (id) => {
  _this.$toPage('/activityDetail/' + id)
}
</script>

<style scoped lang="scss">
::v-deep .cardlist-item {
  border-radius: 0px !important;
}
</style>
